<template>
  <div id="app">
    <div class="goods main">
      <br />
      <!-- 所有商品 -->
      <div class="goods-box">
        <mall-goods
          v-for="(goods, index) in allGoods"
          :key="index"
          :goods="goods"
        ></mall-goods>
      </div>
      <br />
    </div>
  </div>
</template>

<script>
// import MallGoods from "@/components/MallGoods";
const MallGoods = () => import("@/components/MallGoods");
// import { all_json } from "@/db/settings";
const all_json = require("@/db/settings.json");
export default {
  components: {
    MallGoods: MallGoods,
  },
  data() {
    return {
      allGoods: [],
    };
  },
  created() {
    this.getAllGoods();
  },
  methods: {
    async getAllGoods() {
      for (let i = 0; i < all_json.length + 10; i++) {
        let rdm = Math.floor(Math.random() * all_json.length);
        all_json.push(all_json[rdm]);
        all_json.splice(rdm, 1);
      }
      this.allGoods = all_json;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style/reset.scss";

#app {
  height: 100%;
}
.main {
  background-color: #E4EBF5;
  overflow: hidden;
  width: 100%;
}

.goods-box {
  overflow: hidden;
  width: 1164px;
  // width: 1312px;
  margin: 0 auto;
  > div {
    float: left;
    // border: 1px solid #efefef;
  }
}
</style>
